<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.cn.wanxi.model.CompanyModel" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/20
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<%--<%--%>

<%--    //    如果，在jsp页面用刚刚我们在后台封装的代码，我们需要对对象进行实例化--%>
<%--    CompanyModel companyModel = new CompanyModel();//创建对象--%>

<%--//    如果我们要拿到公司对象里面的属性，需要进行实例化，并通过格式companyModel.logo--%>

<%--%>--%>

<!--html分块，由div来进行分块-->
<!--div块级元素，自动换行 span 行内元素 -->
<!--如果每一个页面都有上边部分和下边部分，如果客户需要修改电话号码，我们需要对每一个页面进行修改，所以这里需要将公共部分进行提取-->
<div class="home-top">
    <!--    公司信息-->
    <div class="home-top-company">
        <!--        我们需要对公司logo和公司电话进行左右对齐-->
        <div class="company-logo"><img src="${companyModel.logo}" height="141" width="204"/></div>
        <div class="company-phone">
            <div class="phone-img"><img src="../img/icon2_03_uc2a.png" height="30" width="30"/></div>
            <!--            电话号码改成白色，颜色 CSS代码叫color-->
            <div class="phone-zi">
                ${companyModel.phone}
                <!--                028-88888888-->
            </div>
        </div>
    </div>
    <!--    导航信息-->
    <div class="home-nav">
        <!--ul是无需列表ol是有序列表,怎么来设置有序列表的前面的数字显示，a,b,c        I II III VI-->
        <!--        ul 无需列表 怎么改变前面符号，方块，空心-->
        <!--        <ul>-->
        <!--            <li>网站首页</li>-->
        <!--            <li>公司介绍</li>-->
        <!--            <li>新闻动态</li>-->
        <!--            <li>产品信息</li>-->
        <!--            <li>在线留言</li>-->
        <!--            <li>联系我们</li>-->
        <!--        </ul>-->
        <div>
            <%--            items为接收后台数据 ${list}里的list必须和servlet里面的list一致
            var 里面表示对象 里面的名字叫做别名：随便起名，只要见名知意
            --%>
            <c:forEach items="${navModelList}" var="navModel">
                <a href="${navModel.href}">
                    <div>${navModel.name}</div>
                </a>
            </c:forEach>
            <%--            <a href="home.html">--%>
            <%--                <div>网站首页</div>--%>
            <%--            </a>--%>
            <%--            <a href="company.html">--%>
            <%--                <div>公司介绍</div>--%>
            <%--            </a>--%>
            <%--            <a href="news.html">--%>
            <%--                <div>新闻动态</div>--%>
            <%--            </a>--%>
            <%--            <a href="product.html">--%>
            <%--                <div>产品信息</div>--%>
            <%--            </a>--%>
            <%--            <a href="online.html">--%>
            <%--                <div>在线留言</div>--%>
            <%--            </a>--%>
            <%--            <a href="callus.html">--%>
            <%--                <div>联系我们</div>--%>
            <%--            </a>--%>
        </div>

    </div>
    <!--    广告信息-->
    <div class="home-ad">
        ${companyModel.ad}
        <!--        <div class="ad-one">品味生活 · 品味美食</div>-->
        <!--        <div>-->
        <!--            &lt;!&ndash;            p标签叫做段落&ndash;&gt;-->
        <!--            <p>一壶茶 出了生活的醇美</p>-->
        <!--            <p>一枝花 开出了生活的鲜艳</p>-->
        <!--            <p> 一首诗 吟出了生活的酸辛</p>-->
        <!--            <p> 一把火 燃烧出了生活的激情</p>-->
        <!--            <p>一枝笔 绘出了人生的五彩缤纷</p>-->
        <!--            <p>一首歌 唱出了人生的喜怒哀惧</p>-->
        <!--            <p>生活像五味瓶，这么酸、这么甜、这么苦、又这么辣</p>-->

        <!--        </div>-->
        <!--        &lt;!&ndash;        生活，美食，下面p标签内容的字体，颜色，大小一致，说明我们需要对这三块有一个共同的类名&ndash;&gt;-->
        <!--        <div>-->
        <!--            &lt;!&ndash;            <p>品味<span class="ad-three-zi">生活</span> 品味<span class="ad-three-zi">美食</span></p>&ndash;&gt;-->
        <!--            <p>-->
        <!--                <span>品味</span>-->
        <!--                <span>生活</span>-->
        <!--                <span>品味</span>-->
        <!--                <span>美食</span>-->
        <!--            </p>-->
        <!--            <p class="ad-three-zi ad-three-p">星语餐饮给你生活指南</p>-->
        <!--        </div>-->
    </div>
</div>
</body>
</html>